<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
    }
    /* 顶部导航 */
    .topnav{
        margin-top: 30px;
        display: flex;
        justify-content:space-between;
    }
    .topnav img:nth-child(1){
        width: 20px;
        height: 20px;
        margin-left: 20px;
    }
    .topnav img:nth-child(3){
        width: 20px;
        height: 20px;
        margin-right: 20px;
    }
    .topnav span:nth-child(2){
        font-size: 20px;
        color: #505050;
    }
     /* 上导航 */
    .picture{
        height: 200px;
        width: 100%;
        margin-top: 20px;
    }
    /* 精选好课 */
    .hot{
        font-size: 30px;
        position: relative;
        top: 5px;
        left: 10px;
        color: #505050;
        font-weight: 600;
    }
    /* 专栏1 */
    .columns1{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .columns1>img{
        height: 130px;
        width: 170px;
        margin-top: 15px;
    }
    /* 专栏1：标题 */
    .title1{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        margin-left: 50px;
        font-size: 19px;
    }
    .title1 span:nth-child(1){
        height: 50px;
        width: 190px;
        color: #505050;
        margin-top: 5px;
        margin-left: -30px;
    }
    .title1 span:nth-child(2){
        height: 50px;
        width: 160px;
        color: #505050;
        margin-left: 160px;
        margin-top: -50px;
    }
    /* 专栏1：左边 */
    .xing1{
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    /* 四星半 */
    .xing1 img:nth-child(1){
        height: 10px;
        margin-top: 10px;
        margin-left: -55px;
    }
    /* 4.6 */
    .xing1 span:nth-child(2){
        font-size: 16px;
        color: #505050;
        margin-top: 7px;
        margin-left: -135px;
    }
    /* 3128人学过 */
    .xing1 span:nth-child(3){
        font-size: 14px;
        color: #505050;
        position: relative;
        top: 7px;
        left: -125px;
    }
    /* 专栏1：右边 */
    .xing2{
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    /* 五星 */
    .xing2 img:nth-child(1){
        height: 11px;
        margin-top: -15px;
        margin-left: 190px;
    }
    /* 5.0 */
    .xing2 span:nth-child(2){
        font-size: 16px;
        color: #505050;
        margin-top: -18px;
        margin-left: -2px;
    }
    /* 6865人学过 */
    .xing2 span:nth-child(3){
        font-size: 16px;
        color: #505050;
        position: relative;
        top: -20px;
        left: 0px;
    }
    .price1{
        display: flex;
        justify-content: space-around;
        margin-top: -20px;
        font-size: 18px;
        color: #ee6848;
    }
     /* ￥99.00 */
     .price1 span:nth-child(1){
        margin-left: -85px;
    }
     /* ￥149.00 */
    .price1 span:nth-child(2){
        margin-left: -75px;
    }
    /* 专栏2 */
    .columns2{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    .columns2>img{
        height: 130px;
        width: 170px;
        margin-top: 5px;
    }
    /* 专栏2：标题 */
    .title2{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        margin-left: 50px;
        font-size: 19px;
    }
    .title2 span:nth-child(1){
        height: 50px;
        width: 190px;
        color: #505050;
        margin-top: 5px;
        margin-left: -30px;
    }
    .title2 span:nth-child(2){
        height: 50px;
        width: 160px;
        color: #505050;
        margin-left: 160px;
        margin-top: -50px;
    }
    /* 专栏2：左边 */
    .xing3{
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    /* 五星 */
    .xing3 img:nth-child(1){
        height: 10px;
        margin-top: 10px;
        margin-left: -55px;
    }
    /* 4.8 */
    .xing3 span:nth-child(2){
        font-size: 16px;
        color: #505050;
        margin-top: 7px;
        margin-left: -135px;
    }
    /* 7144人学过 */
    .xing3 span:nth-child(3){
        font-size: 14px;
        color: #505050;
        position: relative;
        top: 7px;
        left: -125px;
    }
    /* 专栏2：右边 */
    .xing4{
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    /* 五星 */
    .xing4 img:nth-child(1){
        height: 11px;
        margin-top: -15px;
        margin-left: 190px;
    }
    /* 4.8 */
    .xing4 span:nth-child(2){
        font-size: 16px;
        color: #505050;
        margin-top: -18px;
        margin-left: -2px;
    }
    /* 2547人学过 */
    .xing4 span:nth-child(3){
        font-size: 16px;
        color: #505050;
        position: relative;
        top: -20px;
        left: 0px;
    }
    .price2{
        display: flex;
        justify-content: space-around;
        margin-top: -20px;
        font-size: 18px;
        color: #ee6848;
    }
     /* ￥199.00 */
     .price2 span:nth-child(1){
        margin-left: -85px;
    }
     /* ￥199.00 */
    .price2 span:nth-child(2){
        margin-left: -75px;
    }
</style>
<body>
    <!-- 顶部导航 -->
    <div>
        <div class="topnav">
            <img  src="../jpg/返回.png" >
            <span>PPT</span>
            <img src="../jpg/搜索.png">
        </div>
        <img class="picture" src="../jpg/PPT.png">
        <!-- 精选好课 -->
        <span class="hot">精选好课</span>
        <!-- 专栏1 -->
        <div class="columns1">
            <img src="../jpg/PPT1.jpg">
            <img src="../jpg/PPT2.jpg">
        </div>
        <div class="title1">
            <span>零基础PPT快速入门——秋叶系列课程</span>
            <span>工作型PPT应该这样做</span>
        </div>
        <!-- 专栏1：左边 -->
        <div class="xing1">
            <img src="../jpg/四星半.png">
            <span>4.6</span>
            <span>3128人学过</span>
        </div>
        <!-- 专栏1：右边 -->
        <div class="xing2">
            <img src="../jpg/五星.png">
            <span>5.0</span>
            <span>6865人学过</span>
        </div>
        <div class="price1">
            <span>￥99.00</span>
            <span>￥149.00</span>
        </div>
        <!-- 专栏2 -->
        <div class="columns2">
            <img src="../jpg/PPT3.jpg">
            <img src="../jpg/PPT4.jpg">
        </div>
        <div class="title2">
            <span>阿文新课：我懂个P人气教程</span>
            <span>锐普的PPT超神课</span>
        </div>
        <!-- 专栏2：左边 -->
        <div class="xing3">
            <img src="../jpg/五星.png">
            <span>4.8</span>
            <span>7144人学过</span>
        </div>
        <!-- 专栏2：右边 -->
        <div class="xing4">
            <img src="../jpg/五星.png">
            <span>4.8</span>
            <span>2547人学过</span>
        </div>
        <div class="price2">
            <span>￥199.00</span>
            <span>￥199.00</span>
        </div>
        
    </div>
    
</body>
</html>